<template>
	<view class="page">
		<!-- <view class="header">
			<image class="back" src="../../static/tian/list.png" mode=""></image>
			<view class="text"></view>
			<image @click="history" class="icon" src="../../static/tian/lishi.png" mode=""></image>
		</view> -->
		<customNavbar :title="$t('first.title50')" :ids="'1'" @toTime="toTime" @send="getrightclick" />
		<view class="con">
			<!-- <image class="img" src="../../static/tian/ai.png" mode=""></image> -->
			<view class="img_down">
				<view class="down_title">{{$t('first.title50')}}</view>
				<view :class="showmore ? 'item_text':'item_texts'">{{$t('first.title51')}}</view>
				<img @click="changeshow" :class="showmore ? 'img':'imgs'" src="../../static/img/jiantou.png" alt="" />
			</view>
			<view class="bottom">
				<view class="bheader" >
					<view class="item" @click="changeselect(index)" v-for="(item,index) in datalist" >
						{{item.type_name}}
						<view v-if="selcet == index" class="line"></view>
					</view>
				</view>
				<view class="bcon">
					<view class="bconbox">
						<view class="bconbox1" :style="styleObject1">
							<view class="bcbitem"  v-for="(item,index) in datalist" >
								<view class="bcbitemcon">
									<view class="conitem">
										<view class="left">MIN:</view>
										<view class="right">{{item.min_number}}</view>
									</view>
									<view class="conitem">
										<view class="left">MAX:</view>
										<view class="right" style="color: #ffb40f;">{{item.max_number}}</view>
									</view>
									<view class="conitem">
										<view class="left">Due date:</view>
										<view class="right">{{item.days}}DAY</view>
									</view>
									<view class="conitem">
										<view class="left">RATE:</view>
										<view class="right">{{torade(item.rate)}}%</view>
									</view>
									<button class="btns" @click="toBuy(item.number,item.id)">{{$t('first.title56')}}</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if='show2'>
			<view
				style="overflow: hidden;width: 80%;;background-color: #ecf0f5;border-radius: 20rpx;padding:50rpx 100rpx">
				<view class="mask_title">{{$t('first.title98')}}</view>
				<u--input class="uInput" :placeholder="$t('first.title135') + ':' + currency.balance"
					border="surround" v-model="selectnum">
					<template slot="suffix">
						<text style="color: #ffb105;font-weight: 800;" @click="max">Max</text>
					</template>
				</u--input>
				<view class="mask_btn">
					<view class="view" @click='show2 = false'>cancel</view>
					<view class="view" @click='tobuy1(selectnum,selectid)'>OK</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavbar from '../index/navigationBar.vue'
	import {domain} from '../../config/domain.js'
	export default{
		components: {
			customNavbar
		},
		data(){
			return{
				isDisable:true,
				selcet:0,
				lang:'ft',
				userinfo:[],
				datalist:[],
				styleObject1:{
					transform: 'translateX(0px)'
				},
				show2:false,
				selectnum:'',
				selectid:'',
				selectcurrency:[],
				currency:[],
				showmore:true
			}
		},
		onLoad(e) {
			this.userinfo= uni.getStorageSync('userinfo');
			this.currencyTypes();
			this.getlist();
		},
		methods:{
			changeshow(){
				this.showmore = !this.showmore
			},
			max(){
				if(this.selectcurrency.max_number <= this.currency.balance){
					this.selectnum = this.selectcurrency.max_number
				}else{
					this.selectnum = this.currency.balance
				}
			},
			getlist(){
				var url = domain + 'api/user/currency?type=1';
				var mytype = 'get';
				var userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						for(let i = 0;i < res.data.list1.length;i++){
							if(res.data.list1[i].code == 'USDT'){
								this.currency = res.data.list1[i]
							}
						}
						console.log(this.currency)
					},
					fail: (err) => {
						console.log(err)
					},
				});
			},
			// getcp(item){
			// var tname= 'type_name_'+this.lang
			// console.log(tname);
			// var ob =Object.values(item);
			// console.log()
			// return ob[tname];
			// },
			torade(rate){
				console.log((rate*100))
				return (rate*100).toFixed(3);	
			},
			changeselect(e){
				this.selcet = e;
				this.selectcurrency = this.datalist[e]
				if(e == 0){
					this.styleObject1.transform = 'translateX(0)'
				}else if(e == 1){
					this.styleObject1.transform = 'translateX(-670rpx)'
				}else if(e == 2){
					this.styleObject1.transform = 'translateX(-1340rpx)'
				}else if(e == 3){
					this.styleObject1.transform = 'translateX(-2010rpx)'
				}
			},
			getrightclick(){
				uni.navigateTo({
					url:'./arbitrageAIList'
				})
			},
			currencyTypes(){
				var url=domain + 'api/new_dao_currencyTypes';
				var mytype='get';

				uni.request({
					url,
					method: mytype,
		
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':this.userinfo.token,
					},
					success: res => {
						if(res.data.code==0){
							uni.showToast({
								icon:'none',
								title:res.data.msg 
								// duration:10000
							}); 
						}else{
							this.datalist=res.data.data
							this.selectcurrency = res.data.data[0]
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			toBuy(number,id){
				this.show2 = true;
				this.selectnum = '';
				// this.selectnum = number;
				this.selectid = id;
			},
			tobuy1(number,id){
				if(!this.isDisable){
					return;
				}
				this.isDisable=false
				if(!number){
					uni.showToast({
						icon:'none',
						title:this.$t('wallet.Please') +  this.$t('first.title98') 
						// duration:10000
					});
					return;
				}
				var url=domain + 'api/new_dao_submit';
				var mytype='post';
				
				var data={
					type_id:id,
					number:number,
				}; 
				 
				       // setTimeout(()=>{
				       //     this.isDisable=false   //点击一次时隔两秒后才能再次点击
				       // },2000)
					    
				uni.request({
					url,
					method: mytype,
					data:data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':this.userinfo.token,
					},
					success: res => {
						this.isDisable = true;
						if(res.data.code > 0){
							this.show2 = false
						}
							
							uni.showToast({
								icon:'none',
								title:res.data.msg 
								// duration:10000
							});
						
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.header .icon{
		width: 44rpx;
		height: 44rpx;
	}
	.con{
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}
	.con .img{
		width: 100%;
		height: 645rpx;
	}
	.img_down{
		width: 100%;
		/* margin-top: -240rpx; */
		background-image: url('../../static/tian/aibg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 50rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		z-index: 9;
	}
	.img_down .item_text{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
		color: #686868;
		font-family: AlibabaPuHuiTiM;
		line-height: 40rpx;
	}
	.img_down .item_texts{
		display: -webkit-box;
		font-size: 28rpx;
		font-family: AlibabaPuHuiTiM;
		line-height: 40rpx !important;
		color: #686868;
	}
	
	.img_down .img{
		display: block;
		width: 20px;
		height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		cursor: pointer;
	}
	.img_down .imgs{
		display: block;
		width: 20px;
		height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		cursor: pointer;
		transform: rotate(180deg);
	}
	.down_title{
		font-size: 48rpx;
		font-family: AlibabaPuHuiTi-Bold,AlibabaPuHuiTi;
		font-weight: 700;
		color: #202020;
		margin-bottom: 30rpx;
		position: relative;
		z-index: 11;
	}
	.down_text{
		font-size: 28rpx;
		font-family: AlibabaPuHuiTiM;
		color: #686868;
	}
	.bottom{
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		overflow: hidden;
	}
	.bheader{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.item{
		position: relative;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 8rpx;
		color: #323233;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 86rpx;
		cursor: pointer;
		
		display: -webkit-box;
		    overflow: hidden;
		    -webkit-line-clamp: 1;
		    -webkit-box-orient: vertical;
			text-align: center;
	}
	.line{
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -40rpx;
		z-index: 1;
		width: 80rpx;
		height: 6rpx;
		background: #ffb105;
		border-radius: 8rpx;
	}
	.bcon{
		overflow: hidden;
	}
	.bconbox{
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		will-change: left;
		overflow: hidden;
		transform: translateZ(0);
		cursor: grab;
		user-select: none;
	}
	.bconbox1{
		transition-duration: 300ms;
		width: 2680rpx;
		display: flex;
		height: 100%;
	}
	.bcbitem{
		flex-shrink: 0;
		box-sizing: border-box;
		height: 100%;
		position: relative;
		width: 670rpx;
	}
	.bcbitemcon{
		width: 100%;
		min-height: 664rpx;
		background: #fff;
		box-shadow: 0 0.21333rem 0.37333rem 0 rgb(48 50 72 / 12%);
		padding: 34rpx;
		box-sizing: border-box;
	}
	.conitem{
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
		width: 100%;
		height: 92rpx;
		background: #fffdf1;
		border-radius: 60rpx;
		border: 2rpx solid #ffc215;
		box-sizing: border-box;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
	}
	.conitem .left{
		flex:1;
		text-align: left;
	}
	.conitem .right{
		flex:1;
		text-align: right;
		font-weight: bold;
		font-size: 32rpx;
	}
	.btns{
		width: 100%;
		height: 96rpx;
		background: #ffb105;
		border-radius: 75rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #23262f;
	}
	
	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 12;
	
	}
	.mask_title {
		width: 100%;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.mask_btn {
		width: 100%;
		margin-top: 30rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.view {
		flex: 1;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 0 10rpx;
		border-radius: 20rpx;
	}

	.view:nth-child(1) {
		background-color: #fff;
		color: #7c7c7c;
	}

	.view:nth-child(2) {
		background-color: #222222;
		color: #fff;
	}
</style>